<template>
    <div>
      <div class="dingwei p1">订单数据</div>
      <div class="dingwei p2">员工数据</div>
      <div class="dingwei p3">库存数据</div>
      <div class="dingwei p4">会员数据</div>
      <div class="dingwei p5">支出数据</div>
        <h1 class="rizhi mm">数据备份</h1>
        <div class="rizhi ">
           
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                  
                </el-checkbox-group>
                <!-- 按钮 -->
                  <el-button type="primary" round @click="open" class="anniu">确认备份</el-button>
                  <el-button  type="primary"  round @click="selectAll" class="anniu btn1">全查备份文件</el-button>
        </div>
<!-- ------------------------------------------------------------- -->
<!--  -->

<!--  -->
<div class="tab">
      <el-table :data="currentData" border style="width: 97%;margin-left:3%">
        <el-table-column prop="id" label="编号" width="200px" ></el-table-column>
        <el-table-column prop="backupTime" label="备份时间"  width="250px" ></el-table-column>
        <el-table-column prop="tableName" label="备份表名" ></el-table-column>
        <el-table-column label="操作" width="350px" >
          <template slot-scope="scope">
            <el-button type="primary" class="paifa" size="small" 
            @click="restore(scope.$index, scope.row)">恢复数据</el-button> 
          </template>
        </el-table-column>
      </el-table>
    </div>
<!-- ------------------------------------------------------------- -->
<div class="block">
      <!-- 
            background---设置背景颜色
            hide-on-single-page---只有一页时隐藏分页
            :total---总数据数量
            :page-size---每页显示数据的条数
            :pager-count---最大可见页码数
            @current-change---currentPage改变时会触发(会自动获得页码)
            :current-page---当前页
      -->
      <el-pagination
        background
        hide-on-single-page
        layout="prev, pager, next"
        :total="this.pageNum"
        :page-size="this.pageSize"
        :pager-count="this.pageCount"
        @current-change="changePage"
        :current-page="currentPage"
        class="fen"
      ></el-pagination>
    </div>
<!-- ------------------------------------------------------------- -->
        <clock :time="time" id="clock"></clock>
        <div id="time">
          <span>{{year}}年{{month}}月{{date}}日 星期{{day}} {{time}}</span>
        </div>
    </div>
</template>
<script>
import Clock from 'vue-clock2';
import { mapActions } from "vuex";
import http from "../../http/http";
const cityOptions = ['diningOrderMain', 'staff', 'depotGoods', 'user','payPrice'];
const days = ['一', '二', '三', '四', '五', '六', '天']; //-------------------------- 星期数组
let icnow = new Date();      //-------------------------- 初始化时间
let interval;                //-------------------------- 定义全局定时器，用于清除定时器
export default {
    name:'DataBackup',
    components: { Clock },
    data() {
      return {
        currentPage: 1,
        pageSize: 5,
        pageCount: 7,
        // 
        checkAll: false,
        checkedCities: ['diningOrderMain', 'staff'],
        cities: cityOptions,
        isIndeterminate: true,
        year: icnow.getFullYear(),
        month: icnow.getMonth() + 1,
        date: icnow.getDate(),
        day: days[icnow.getDay() - 1],
        time: icnow.toTimeString().substring(0, 8)
      };
    },
// <!-- ------------------------------------------------------------- -->
computed: { //--------------------------分页的计算属性
      currentData() {
        let start = (this.currentPage - 1) * this.pageSize;
        let end = this.currentPage * this.pageSize;
        return this.$store.state.ljnStore.tableData4.slice(start, end);
      },
      pageNum() {
        return this.$store.state.ljnStore.tableData4.length;
      },
    
  },
// <!-- ------------------------------------------------------------- -->
    beforeMount(){       //--------------------------时钟的函数
        interval = setInterval(() =>{
      let icnow = new Date();
        this.year = icnow.getFullYear();
        this.month = icnow.getMonth() + 1;
        this.date = icnow.getDate();
        this.day = days[icnow.getDay() - 1];
        this.time = icnow.toTimeString().substring(0, 8);
    }, 1000)
    },
// <!-- ------------------------------------------------------------- -->
      beforeDestroy () {
      clearInterval(interval);
    },
// <!-- ------------------------------------------------------------- -->
    methods: {
      
        open() {             //--------------------------确认备份按钮
          let checkedCities = this.checkedCities
            if(checkedCities.length == 0){
              this.$alert('您的选择为空，请重新选择', '提示消息', {
                confirmButtonText: '确定',
                callback: action => {
                  this.$message({
                    type: 'info',
                    message: `您的选择为空，请重新选择`
                  });
                }
              });
          }else{
            this.$alert('备份成功', '备份消息', {
              confirmButtonText: '确定',
              callback: action => {
                this.$message({
                  type: 'info',
                  message: `后台已为您备份数据`
                });
              }
            });
            let nowTimes = Date()
            let nowdate = new Date(nowTimes).toLocaleDateString().replace(/\//g,'-')
            let Tables = this.checkedCities 
            console.log(nowdate)
            console.log(Tables)
            http({ //--------------------------备份ajax
              url:'/mgrsite/SAdmin/DataBackup',
              method:'post',
              data:{
                "tableNames": Tables
              }
            }).then(res =>{
              console.log(res)
              // this.selectAll()
            }).catch(err =>{
              console.log(err)
            })
          }
        },
// <!-- ------------------------------------------------------------- -->
      handleCheckAllChange(val) {     //------------------------------多选框全选按钮
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) { //------------------------------多选框函数
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      },
// <!-- ------------------------------------------------------------- -->
      setNowTimes(){         //------------------------------处理时间
            let myDate = new Date();
            this.nowTimes.yy = myDate.getMonth()+1;
            this.nowTimes.dd = String(myDate.getDate()<10?'0'+ myDate.getDate(): myDate.getDate()) ;
            this.nowTimes.hou = String(myDate.getHours()<10?"0"+myDate.getHours():myDate.getHours());
            this.nowTimes.min = String(myDate.getMinutes()<10?'0'+myDate.getMinutes():myDate.getMinutes());
            this.nowTimes.sec = String(myDate.getSeconds()<10?'0'+myDate.getSeconds():myDate.getSeconds());
      },
// <!-- ------------------------------------------------------------- -->   
      selectAll(){            //全查备份文件
        http({
          url:'/mgrsite/SAdmin/selectBackUp',
          method:'post',
        }).then(res =>{
          console.log(res.data)
          this.$store.state.ljnStore.tableData4 = res.data
        })
      },
      changePage(val) {
      this.currentPage = val;
      },

      restore(index,row){             //恢复数据
        console.log(row.backupTime)
        this.$confirm("您确定要恢复此备份文件吗？","提示",{
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        http({
          url:'/mgrsite/SAdmin/DataRecovery',
          method:'post',
          data:{
            "backupTime":row.backupTime,
          }
        }).then(res =>{
          console.log(res.status)
          if(res.status == 200){  
          }else{
            this.$alert("系统恢复数据失败！")
          }
          
        })
      },
      }
}
</script>
<style scoped lang="less">
  .rizhi{
    // border: 1px solid red;
    margin-left: 50px;
    .anniu{
      margin-top: 40px;
    }
  }
  .fen {
      margin-top: 10px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
  .tab {
      margin-top: 30px;
  }
  .paifa{
      margin-left: 45px;
      width: 150px;
      font-size: 13px;
    }
  .btn1{
    margin-top: 20px;
  }
  .mm{
    margin-top: 100px;
  }
  #time{
    position: absolute;
    top: 26%;
    right: 20%;
    font-size: 20px;
  }
  #clock{
    position: absolute;
    top: 80px;
    left: 68%;
  }
  .dingwei{
    position: absolute;
  }
  .p1{
    font-size: 14px;
    color: #409EFF;
    left: 17%;
    top: 30.5%;
  }
  .p2{
    font-size: 14px;
    color: #409EFF;
    left: 25%;
    top: 30.5%;
  }
  .p3{
    font-size: 14px;
    color: #409EFF;
    left: 30%;
    top: 30.5%;
  }
  .p4{
    font-size: 14px;
    color: #409EFF;
    left: 37%;
    top: 30.5%;
  }
  .p5{
    font-size: 14px;
    color: #409EFF;
    left: 41.5%;
    top: 30.5%;
  }
</style>